import React, { Component } from 'react'
import { Button } from 'antd'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/person'
class Person extends Component {
    addPerson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value
        console.log(this.props);
        this.props.addPerson({ name, age, id: new Date() })
        this.nameNode.value = ""
        this.ageNode.value = ""
    }

    render() {
        return (
            <div>
                <h1>上方组件和为：{this.props.sum}</h1>
                <input ref={c => this.nameNode = c} type="text" placeholder="输入名字" />
                <input ref={c => this.ageNode = c} type="text" placeholder="输入年龄" />
                <Button onClick={this.addPerson}>添加</Button>
                <ul>
                    {
                        this.props.person.map(p => {
                            return (
                                <li key={p.id}>姓名-{p.name}，年龄-{p.age}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({
        person: state.person,
        sum: state.count
    }),
    { addPerson }
)(Person)